前言
目前主流的前端框架有三者,React、Angular、Vue,會想選擇Vue的原因是Vue為這三者之中最易學習的框架,剛出社會時算是全端開發者的我,那時沒什麼框架的概念,殊不知一接觸後,滿是後悔沒早點學習框架。後續將會有關於Vue的一系列的文章,想紀錄一下學習筆記,本文先來分享Vue的安裝。
Windows 10 Vue安裝
官網上有說明安裝方法。
獨立版本
至官網下載檔案放置在專案中,並用引入,有分開發及產品版本。NPM
先安裝Node.js,安裝完成後,用檢視版本指令來查看是否成功。$ node -v
使用node套件管理(npm)來安裝vue及vue-cli,vue沒有包含vue相關指令的,因此還需要安裝vue-cli工具來提高開發效率,而vue-cli是vue.js提供給開發者能夠快速使用vue指令操作的工具。
$ npm install vue #全局安裝 $ npm install -g vue-cli
全局安裝vue-cli後,往後要新增vue專案都不需要再安裝即可使用vue相關指令,此時請注意畫面是否有出現vue-init相關的路徑,可以先把路徑記下來後續會提到用途。
$ vue -V
要確認是否有安裝成功可使用檢視版本的指令來查看。
在這裡遇到了一個問題,vue: command not found,查了一下發現是環境變數沒設定的關係,到"控制台->系統及安全性->系統->進階系統設定->環境變數"中的Path新增,路徑為全局安裝vue-cli的地方,即為在上面提到的vue-init路徑,新增完後就可以使用vue指令了。C:\Users\ASUS\AppData\Roaming\npm
開始建立專案
$ vue create project_name $ cd project_name $ npm install #建置 $ npm run build #啟動 $ npm run serve
新增專案時會有三種可選,前兩者為預設,第三個選項為自行選擇要安裝的項目,詳細可到官網上查看,在這裡我選擇第一個安裝,完成後需先安裝相關套件再啟動,到localhost:8080(預設是8080)查看有畫面就完成了。
總結
以上是安裝vue的過程以及遇到環境變數尚未設定的解決辦法。